<template>
	<el-pagination
		background
		class="sw-pagination"
		@size-change="handleSizeChange"
		@current-change="handleCurrentChange"
		:current-page.sync="curPage"
		:page-sizes="pageSizes"
		:page-size.sync="pageSize"
		:layout="layout"
		:total="total"
	>
		<span class="el-pagination__total">共 {{ total }} 条{{ notice }}</span>
	</el-pagination>
</template>

<script>
export default {
	name: 'swPagination',
	props: {
		total: { require: true, type: Number },
		page: { require: true, type: Number, default: 1 },
		limit: { require: true, type: Number, default: 15 },
		pageSizes: { type: Array, default: () => [15, 30, 60, 120] },
		layout: { type: String, default: 'slot, sizes, prev, pager, next, jumper' },
		notice: { type: String, default: '数据' }
	},
	data() {
		return {};
	},
	computed: {
		curPage: {
			get() {
				return this.page;
			},
			set(val) {
				this.$emit('update:page', val);
			}
		},
		pageSize: {
			get() {
				return this.limit;
			},
			set(val) {
				this.$emit('update:limit', val);
			}
		}
	},
	methods: {
		handleSizeChange(val = this.limit) {
			this.$emit('change');
		},
		handleCurrentChange(val = this.page) {
			this.$emit('change');
		}
	}
};
</script>

<style lang="scss" scoped>
.el-pagination::v-deep {
	display: flex;
	padding: 0;
	font-size: 0;
	line-height: 0;
	flex-shrink: 0;

	.el-pagination__total {
		flex: 1;
		overflow: hidden;
		font-weight: normal;
	}

	.el-pagination__jump {
		margin-left: 16px;
	}

	.el-pagination__sizes {
		line-height: 1 !important;
	}

	&.is-background {
		.btn-prev {
			margin-left: 0;
		}

		.btn-next {
			margin-right: 0;
		}
	}
}
</style>
